<template>
  <div class="content-div">
    <div class="head-div flex row-center" style="position: relative;">
      <img class="head-div-img" :src="head_sculpture" alt="">
      <van-uploader :after-read="afterRead" style="position: absolute;top: 74%;left: 56%;">
        <img src="@/assets/images/photo.png" alt="" style="width:50%;">
      </van-uploader>
    </div>
    <div class="gn-box">
      <div :style="{ 'borderBottom' : index < 6 ? '1px solid #E8E8E8' : '0px' }" class="gn-item" v-for="(item, index) in gnList" :key="index">
        <div class="gn-item-title">
          <span>{{item.name}}</span>
        </div>
        <div class="gn-item-text"><span>{{item.value}}</span></div>
        <van-icon color="#999999" name="arrow" />
      </div>
      <div class="gn-item">
        <van-field
          class="login-input"
          v-model="userInfo.brief_introduction"
          rows="1"
          autosize
          type="textarea"
          maxlength="200"
          right-icon="arrow"
          label="个人简介"
          placeholder="请输入个人简介"
          :rules="[{ required: true, message: '请输入个人简介' }]"
        />
      </div>
    </div>
    <div class="gn-btn-box">
      <div class="gn-btn"  @click="saveInfo()">保存修改</div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { getSignToHadoop, uploadFilesToHadoop } from '@/api/medical.js'
import { updateBriefIntroduction, selectAccompanyingPhysician } from '@/api/medicalWaiter.js'
export default {
  name: 'userInfo',
  data () {
    return {
      accompanying_physician_id: '',
      userInfo: {},
      gnList: [
        { name: '姓名', img: require('@/assets/images/提现明细.png'), router: '/addressList', value: '' },
        { name: '年龄', img: require('@/assets/images/联系客服.png'), router: 'callPhone', value: '' },
        { name: '身份证号', img: require('@/assets/images/我的消息.png'), router: '/aboutUs', value: '' },
        { name: '手机号码', img: require('@/assets/images/我的地址.png'), router: '/policyIn?pageType=1', value: '' },
        { name: '护龄', img: require('@/assets/images/接单助手.png'), router: '/policyIn?pageType=2', value: '' }
        // { name: '个人简介', img: require('@/assets/images/关于我们.png'), router: '/setting', value: '' }
      ],
      head_sculpture: ''
    }
  },
  created () {},
  methods: {
    saveInfo () { // 保存个人简介
      updateBriefIntroduction({ accompanying_physician_id: this.userInfo.accompanying_physician_id, brief_introduction: this.userInfo.brief_introduction, head_sculpture: this.userInfo.head_sculpture }).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('个人简介保存成功')
          this.$router.push('/mine-waiter')
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    getPhysicianInfo (accompanying_physician_id) {
      selectAccompanyingPhysician({ accompanying_physician_id: accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.userInfo = res.data.data
          this.head_sculpture = res.data.data.head_sculpture
          this.gnList[0].value = this.userInfo.name
          this.gnList[1].value = this.userInfo.age
          this.gnList[2].value = this.userInfo.card_no
          this.gnList[3].value = this.userInfo.tel
          this.gnList[4].value = this.userInfo.nurse_age
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    afterRead (file) {
      let index = file.content.indexOf('base64,') + 7
      let time = new Date().getTime().toString()
      let fileData = {
        fileName: time + '-' + file.file.name,
        filePath: 'mobile',
        file: file.content.substring(index)
      }
      file.status = 'uploading'
      file.message = '上传中...'
      getSignToHadoop({
        filePath: fileData.filePath,
        fileName: fileData.fileName,
        timestamp: time
      }).then(res => {
        if (res.data.errcode === 0) {
          uploadFilesToHadoop(res.data.data.docking_url, {
            sign: res.data.data.sign,
            timestamp: time,
            filePath: fileData.filePath,
            fileName: fileData.fileName,
            file: fileData.file
          }).then(ret => {
            if (ret.data.errcode === 0) {
              file.status = 'success'
              file.message = '上传成功'
              this.head_sculpture = ret.data.data
              console.log(this.head_sculpture)
              this.userInfo.head_sculpture = ret.data.data
              this.fileList = [{
                url: ret.data.data
              }]
            }
          })
        }
      })
    }
  },
  mounted () {
    this.accompanying_physician_id = this.$store.state.user.severUserInfo.accompanying_physician_id
    this.getPhysicianInfo(this.accompanying_physician_id)
    // for (const key in this.userInfo) {
    //   if (Object.hasOwnProperty.call(this.userInfo, key)) {
    //     const element = this.userInfo[key]
    //     console.log(element, key)
    //     this.gnList[0].value = this.userInfo.name
    //   }
    // }
    // console.log(this.userInfo)
  }
}
</script>
<style scoped lang="less">
  .content-div {
    background-color: #f2f3f7;
    padding: 10px;
    height: auto;
    min-height: 100%;
    font-size: 12px;
    .head-div {
      height: 65px;
      padding-top: 20px;
      .head-div-img {
        width: 65px;
        height: 65px;
        border-radius: 50px;
        border: 1px solid lightgray;
      }
    }
    .gn-box{
      box-sizing: border-box;
      padding: 10px;
      background-color: #fff;
      margin-top: 35px;
      border-radius: 10px;
      .gn-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        box-sizing: border-box;
        // border-bottom: 1px solid #E8E8E8;
        padding: 10px 4px;
        img{
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
        .gn-item-title {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          width: 30%;
          color: #666666;
        }
        .gn-item-text {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          font-size: 12px;
          width: 70%;
        }
        /deep/ .van-cell {
          font-size: 12px;
          padding: 0px;
        }
        /deep/ .van-field__control {
          text-align: right;
        }
      }
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .border-b {
      border-bottom: 1px solid #E8E8E8;
    }
  }
</style>
